<template>
    <div class="bg page-serveall">
        <div key="index" v-if="item.sub.length" v-for="(item,index) in menuList" class="business">
        	<h2>{{item.name}}</h2>
        	<ul class="clearFix">
        		<li key="cindex" v-for="(citem,cindex) in item.sub">
        			<router-link :to="{ name: 'ServeDetail', query: { id: citem.id,name: citem.name }}">
	        			<div><img :src="citem.icon"/></div>
	        			<p>{{citem.name}}</p>
	        		</router-link>
        		</li>
        	</ul>
        </div>
    </div>
</template>

<script>
	import http from '../services/http';
	import { mapState } from 'vuex';
	
    export default {
    	name:'serve-all',
        data() {
	      return {
	        
	      }
	    },
	    computed:{
	    	...mapState({
	    		menuList: state => state.serve.menuList,
		    })
	    },
	    mounted() {
	    //	console.log(this.menuList)
	    },
	    created() {
        	this.$store.dispatch({ type: 'getMenuList' });
	    },
    };
	
</script>

<style lang="scss">
.page-serveall {
	background: #f5f5f5;
	.business {
		padding: 5px 0 20px;
		margin-bottom: 10px;
		background: #ffffff;
		
		h2 {
			font-size: 1.05rem;
			font-weight: 600;
			color: #222222;
			text-align: center;
			padding: 10px 0;
		}
		
		ul li {
			padding-top: 10px;
			float: left;
			width: 25%;
			div {
				height: 45px;
				background: transparent no-repeat center / 45px 45px;
				text-align: center;
				
				img{
					height: 45px;
					width: 45px;
				}
			}
			p {
				color: #666666;
				font-size: 0.85rem;
				line-height: 20px;
				padding: 5px 0;
				text-align: center;
			}
		}
	}
	
}
</style>
